<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>表格的便捷操作</title>
	<script type="text/javascript">
        window.onload = function(){
        	var oTab = document.getElementById('tab1');
            var oName = document.getElementById('name');
            var oAge = document.getElementById('age');
            var oBtn = document.getElementById('btn1');
            var id = oTab.tBodies[0].rows.length+1;

            //添加
            oBtn.onclick = function(){
                var oTr = document.createElement('tr');  //创建tr


                var oTd = document.createElement('td'); //创建td
                //第一列存ID
                oTd.innerHTML =  id++;  //现有总行数+1  ,id删掉的不能重用，只能出现一次
                //把td推到tr里面
                oTr.appendChild(oTd);

                var oTd = document.createElement('td'); //创建td
                //第二列存姓名
                oTd.innerHTML = oName.value;
                //把td推到tr里面
                oTr.appendChild(oTd);


                var oTd = document.createElement('td'); //创建td
                //第三列存年龄
                oTd.innerHTML = oAge.value;
                //把td推到tr里面
                oTr.appendChild(oTd);


                var oTd = document.createElement('td'); //创建td
                //第四列存删除操作
                oTd.innerHTML = '<a href="javascript:;">删除</a>';
                //把td推到tr里面
                oTr.appendChild(oTd);


                //删除，给a链接加事件
                //getElementsByTagName('a')[0]：获取a的第一个元素
                oTd.getElementsByTagName('a')[0].onclick = function(){
                    //这里的this指a, a的父级是td ,td的父级就是tr
                    oTab.tBodies[0].removeChild(this.parentNode.parentNode);
                }


                //最后把tr放进table
                oTab.tBodies[0].appendChild(oTr);

            }
        	
        }
	</script>
</head>
<body>
    
    姓名：<input  id="name" type="text" />
    年龄：<input  id="age" type="text" />
    <input  id="btn1" type="button" value="添加" />
    <table id="tab1" border="1" width="500px">
    	<thead>
    		<tr>
    			<td>ID</td>
    			<td>姓名</td>
    			<td>年龄</td>
                <td>操作</td>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>1</td>
    			<td>Blue</td>
    			<td>27</td>
                <td></td>
    		</tr>
    		<tr>
    			<td>2</td>
    			<td>小潘</td>
    			<td>27</td>
                <td></td>
    		</tr>
    		<tr>
    			<td>3</td>
    			<td>邓狗</td>
    			<td>22</td>
                <td></td>
    		<tr>
    			<td>4</td>
    			<td>张三</td>
    			<td>23</td>
                <td></td>
    		</tr>
    		<tr>
    			<td>5</td>
    			<td>李四</td>
    			<td>25</td>
                <td></td>
    		</tr>
    		<tr>
    			<td>6</td>
    			<td>王五</td>
    			<td>21</td>
                <td></td>
    		</tr>
    	</tbody>
    </table>
	
</body>
</html>